<template>

	<view class="text-area">
		<zb-tab :activeStyle="{
			    fontWeight: 'bold',
			    transform: 'scale(1.1)'
			    }" :data="navTimeList" v-model="active" @click-tab="timeSelectd"></zb-tab>

		<view class="card" v-for="item,index in navTimeList" v-show="item.value==active" :key="item.value">
			<!-- 微信 -->
			<!-- 支付宝 -->
			<view v-show="item.value===1">
				<view class="payConfigurationWeChat">

					<uni-data-checkbox v-model="wxMerchant" :localdata="wx"></uni-data-checkbox>


					<view v-show="wxMerchant == '2'">
						<uni-forms :rules="rulesWxForm" ref="wxForm" :modelValue="wxForm" label-position="top">




							<uni-forms-item label="微信appid" name="appid" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxForm.appid" placeholder="请输入微信appid" />

							</uni-forms-item>
							<uni-forms-item label="直连商户号" name="mchid" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxForm.mchid" placeholder="请输入直连商户号" />

							</uni-forms-item>
							<uni-forms-item label="APIV3密钥" name="appV3Key" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxForm.appV3Key" placeholder="请输入APIV3密钥" />

							</uni-forms-item>
							<uni-forms-item label="证书序列号" name="merchantSerialNumber" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxForm.merchantSerialNumber" placeholder="请输入证书序列号" />

							</uni-forms-item>
							<uni-forms-item label="私钥" name="privateKeyPath" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxForm.privateKeyPath" placeholder="请输入私钥" />

							</uni-forms-item>
							<view class="sumbit-btn flex" @click.stop="saveInfo('wxForm')">
								保存信息
							</view>


						</uni-forms>
					</view>
					<view v-show="wxMerchant == '1'">
						<uni-forms :rules="rulesWxServiceForm" ref="wxServiceForm" :modelValue="wxServiceForm"
							label-position="top">




							<uni-forms-item label="服务商应用ID" name="spAppid" required labelWidth="180px">
								<uni-easyinput type="password" v-model="wxServiceForm.spAppid" placeholder="请输入服务商应用ID" />

							</uni-forms-item>
							<uni-forms-item label="服务商户号" name="spMchid" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxServiceForm.spMchid" placeholder="请输入服务商户号" />

							</uni-forms-item>
							<uni-forms-item label="子商户号" name="subMchid" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxServiceForm.subMchid" placeholder="请输入子商户号" />

							</uni-forms-item>
							<uni-forms-item label="APIv3密钥" name="appV3Key" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxServiceForm.appV3Key" placeholder="请输入APIv3密钥" />

							</uni-forms-item>
							<uni-forms-item label="证书序列号" name="merchantSerialNumber" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="wxServiceForm.merchantSerialNumber" placeholder="请输入私钥" />

							</uni-forms-item>
							<view class="sumbit-btn flex" @click.stop="saveInfo('wxServiceForm')">
								保存信息
							</view>


						</uni-forms>
					</view>
				</view>
			</view>
		
			<view v-if="item.value===2">
				<view class="payConfigurationWeChat">

					<uni-data-checkbox v-model="zfbMerchant" :localdata="zfb"></uni-data-checkbox>


					<view v-show="zfbMerchant == '2'">
						<uni-forms :rules="rulesZfbForm" ref="zfbForm" :modelValue="zfbForm" label-position="top">




							<uni-forms-item label="支付宝appid" name="alipayAppid" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbForm.alipayAppid" placeholder="请输入支付宝appid" />

							</uni-forms-item>
							<uni-forms-item label="支付宝公钥" name="alipayPublicKey" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbForm.alipayPublicKey" placeholder="请输入支付宝公钥" />

							</uni-forms-item>
							<uni-forms-item label="应用公钥" name="appPublicKey" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbForm.appPublicKey" placeholder="请选择应用公钥" />

							</uni-forms-item>
							<uni-forms-item label="应用私钥" name="appPrivateKey" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbForm.appPrivateKey" placeholder="请输入应用私钥" />

							</uni-forms-item>
					
							<view class="sumbit-btn flex" @click.stop="saveInfo('zfbForm')">
								保存信息
							</view>


						</uni-forms>
					</view>
					<view v-show="zfbMerchant == '1'">
						<uni-forms :rules="rulesZfbServiceForm" ref="zfbServiceForm" :modelValue="zfbServiceForm"
							label-position="top">


                           <uni-forms-item label="支付宝appid" name="alipayAppid" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbServiceForm.alipayAppid" placeholder="请输入支付宝appid" />

							</uni-forms-item>

							<uni-forms-item label="结算收款方" name="transIn" required labelWidth="180px">
								<uni-easyinput type="password" trim="all"  v-model="zfbServiceForm.transIn" placeholder="请输入结算收款方" />

							</uni-forms-item>
							<uni-forms-item label="应用公钥" name="appPublicKey" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbServiceForm.appPublicKey" placeholder="请选择应用公钥" />

							</uni-forms-item>
							<uni-forms-item label="应用私钥" name="appPrivateKey" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="zfbServiceForm.appPrivateKey" placeholder="请输入应用私钥" />

							</uni-forms-item>
					
							<view class="sumbit-btn flex" @click.stop="saveInfo('zfbServiceForm')">
								保存信息
							</view>


						</uni-forms>
					</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	import alipayConfiguration from '@/components/alipayConfiguration/alipayConfiguration.vue'
	import alipayConfigurationWeChat from '@/components/alipayConfigurationWeChat/alipayConfigurationWeChat.vue'
	export default {
		components: {
			alipayConfigurationWeChat
		},
		data() {

			return {
				merchantId:348,
				title: 'paymentConfiguration',
				active: 1,
				navTimeList: [{
						name: '微信',
						value: 1,

					},
					{
						name: '支付宝',
						value: 2,
					},
				],
				title: 'paymentConfiguration',
				wx: [{
					text: 'V3商户支付',
					value: '2'
				}, {
					text: '特约商户支付',
					value: '1'
				}],
				zfb: [{
					text: '普通商户支付',
					value: '2'
				}, {
					text: '间连商户支付',
					value: '1'
				}],
				formArr: ['wxForm', 'wxServiceForm', 'zfbForm', 'zfbServiceForm'],
				//   V3商户支付
				wxForm: {
					appid: '', //appid
					mchid: '', //直连商户号

					appV3Key: '', //APIv3密钥
					merchantSerialNumber: '', //证书序列号
					privateKeyPath: '', // 私钥
				},

				//   特约子商户支付
				wxServiceForm: {
					spAppid: '', // 服务商应用ID
					spMchid: '', //服务商户号
					subMchid: '', //子商户号
					appV3Key: '', //APIv3密钥
					merchantSerialNumber: '', //证书序列号
					privateKeyPath: '', //私钥
				},
				//   普通商户支付
				zfbForm: {
					alipayAppid: '', //支付宝appid
					alipayPublicKey: '', //支付宝公钥
					appPublicKey: '', //应用公钥
					appPrivateKey: '', //应用私钥
				},
				//  间连商户支付
				zfbServiceForm: {
					alipayAppid: '', //支付宝appid
					// alipayPublicKey: '', //支付宝公钥
					appPublicKey: '', //应用公钥
					appPrivateKey: '', //应用私钥
					// 账户类型
					transInType: 'loginName',
					// 结算收款方。
					transIn: '',
				},
				wxPayId: '',
				wxSpPayId: '',
				zfbPayId: '',
				zfbSpPayId: '',

				payType: '1',
				wxMerchant: '2',
				zfbMerchant: '2',
				rulesWxForm: {
					appid: {
						rules: [{
							required: true,
							errorMessage: '微信appid不能为空'
						}]
					},
					mchid: {
						rules: [{
							required: true,
							errorMessage: '直连商户号不能为空'
						}]
					},
					appV3Key: {
						rules: [{
							required: true,
							errorMessage: 'APIv3密钥不能为空'
						}]
					},
					merchantSerialNumber: {
						rules: [{
							required: true,
							errorMessage: '证书序列号不能为空'
						}]
					},
					privateKeyPath: {
						rules: [{
							required: true,
							errorMessage: '私钥不能为空'
						}]
					}
				},
				rulesWxServiceForm: {
					spAppid: {
						rules: [{
							required: true,
							errorMessage: '服务商应用ID不能为空'
						}]
					},
					spMchid: {
						rules: [{
							required: true,
							errorMessage: '服务商户号不能为空'
						}]
					},
					subMchid: {
						rules: [{
							required: true,
							errorMessage: '子商户号不能为空'
						}]
					},
					appV3Key: {
						rules: [{
							required: true,
							errorMessage: 'APIv3密钥不能为空'
						}]
					},
					merchantSerialNumber: {
						rules: [{
							required: true,
							errorMessage: '证书序列号不能为空'
						}]
					},
					privateKeyPath: {
						rules: [{
							required: true,
							errorMessage: '私钥不能为空'
						}]
					}
				},
				rulesZfbServiceForm:{
					alipayAppid: [
					  {
						required: true,
						message: '请输入支付宝appid',
						trigger: 'blur'
					  }
					],
					// alipayPublicKey: [
					//   {
					//     required: true,
					//     message: '请输入支付宝公钥',
					//     trigger: 'blur'
					//   }
					// ],
					appPrivateKey: [
					  {
						required: true,
						message: '请输入应用私钥',
						trigger: 'blur'
					  }
					],
					appPublicKey: [
					  {
						required: true,
						message: '请输入应用公钥',
						trigger: 'blur'
					  }
					],
					transInType: [
					  {
						required: true,
						message: '请选择收款方账户类型',
						trigger: 'blur'
					  }
					],
					transIn: [
					  {
						required: true,
						message: '请输入用户的支付宝登录号',
						trigger: 'blur'
					  }
					],
				  },
				  rulesZfbForm: {
				  	alipayAppid: [
				  	  {
				  		required: true,
				  		message: '请输入支付宝appid',
				  		trigger: 'blur'
				  	  }
				  	],
				  	alipayPublicKey: [
				  	  {
				  	    required: true,
				  	    message: '请输入支付宝公钥',
				  	    trigger: 'blur'
				  	  }
				  	],
				  	appPrivateKey: [
				  	  {
				  		required: true,
				  		message: '请输入应用私钥',
				  		trigger: 'blur'
				  	  }
				  	],
				  	appPublicKey: [
				  	  {
				  		required: true,
				  		message: '请输入应用公钥',
				  		trigger: 'blur'
				  	  }
				  	]
				    }
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.active=1
			
			})
          this.searchForm()
		},
		methods: {
		   timeSelectd(e){
			   console.log(e.value)
			   this.payType=String(e.value)
		   },
			saveInfo(formName) {
				console.log(this.$refs[formName])
				this.$refs[formName][0].validate((err, formData) => {
					// 如果校验成功 ，err 返回 null
					if (!err) {
						console.log('success', formData)
						return
					}
					console.log('error', err)
				}).then(async res => {
					
					// res 返回 null
					for (let i = 0; i < 4; i++) {
						if (!(formName == this.formArr[i])) {
							this.resetForm(this.formArr[i]);
						}
					}
		            console.log({
		            	...this.wxForm
		            })
					
					// 保存的时候存最后保存的sign 和 payType
					console.log((this.payType ))
					const sumbitForm = this.currentFormFn(this.payType)
					localStorage.setItem('payType', JSON.stringify({
						sign: sumbitForm[0][sumbitForm[1]].sign,
						payType: sumbitForm[0][sumbitForm[1]].type
					}));
					console.log(sumbitForm[0])
					
					const result = await this.$http.post({
						url: this.$api.insertSelective,
						data: {
							...sumbitForm[0]
						},
					
					
					});
				
					if(result.code==2000){
						this.$sun.toast(result.msg);
						 this.searchForm()
					}
				
				})
		
			},
			findMatchingProperties (obj1, obj2) {
			  console.log(obj1, obj2)
			  for (const prop in obj2) {
			    if (obj1.hasOwnProperty(prop)) {
			      obj2[prop] = obj1[prop];
			    }
			  }
			  console.log(obj2)
			},
			resetForm(formName) {
				// console.log(formName)
				// console.log(this.$refs[formName])
				// this.$refs[formName].resetFields();
			},
			
			
			async searchForm () {
					
					
					const res = await this.$http.post({
						url: this.$api.selectByPrimaryMerchantId,
						data: {
							merchantId: this.merchantId,
						},
					
					
					});
			     
			      console.log(res)
			      // 获取到微信支付的id
			      this.wxPayId = res.data.wxInfo?.id
			      this.wxSpPayId = res.data.wxSpInfo?.id
			      this.zfbPayId = res.data.zfbInfo?.id
			      this.zfbSpPayId = res.data.zfbSpInfo?.id
			      if (res.data.wxInfo?.type == '1' && res.data.wxInfo?.sign == '2') {
			        this.findMatchingProperties(res.data.wxInfo
			          , this.wxForm)
			      }
			      if (res.data.wxSpInfo?.type == '1' && res.data.wxSpInfo?.sign == '1') {
			        this.findMatchingProperties(res.data.wxSpInfo
			          , this.wxServiceForm)
			      }
			      if (res.data.zfbInfo?.type == '2' && res.data.zfbInfo?.sign == '2') {
			        this.findMatchingProperties(res.data.zfbInfo
			          , this.zfbForm)
			      }
			      if (res.data.zfbSpInfo?.type == '2' && res.data.zfbSpInfo?.sign == '1') {
			        this.findMatchingProperties(res.data.zfbSpInfo
			          , this.zfbServiceForm)
			      }
			      if (JSON.parse(localStorage.getItem('payType'))) {
			        const sign = JSON.parse(localStorage.getItem('payType')).sign;
			        const payType = JSON.parse(localStorage.getItem('payType')).payType;
			        // this.active = payType
			        if (payType == '1') {
			          this.wxMerchant = sign
			        } else {
			          this.zfbMerchant = sign
			        }
			      }
			      this.$nextTick(() => {
			        // this.showEyeValueFn()
			      })
			    },
			
			// 当前的提交的form表单
			currentFormFn(payType) {
				console.log(payType)
				console.log(this.wxMerchant == '2')
				if (payType == '1' && this.wxMerchant == '2') {
				
					return [{
						wxInfo: {
							...this.wxForm,
							id: this.wxPayId ? this.wxPayId : '',
							merchantId: this.merchantId,
							type: (this.payType == '1' && this.wxMerchant == '2') ? this.payType : '',
							sign: (this.payType == '1' && this.wxMerchant == '2') ? this.wxMerchant : ''
						},
					}, 'wxInfo']
				} else if (payType == '1' && this.wxMerchant == '1') {
					return [{
							wxSpInfo: {
								...this.wxServiceForm,
								id: this.wxSpPayId ? this.wxSpPayId : '',
								merchantId: this.merchantId,
								type: (this.payType == '1' && this.wxMerchant == '1') ? this.payType : '',
								sign: (this.payType == '1' && this.wxMerchant == '1') ? this.wxMerchant : ''
							},
						},
						'wxSpInfo'
					]
				} else if (payType == '2' && this.zfbMerchant == '2') {
					return [{
						zfbInfo: {
							...this.zfbForm,
							id: this.zfbPayId ? this.zfbPayId : '',
							merchantId: this.merchantId,
							type: (this.payType == '2' && this.zfbMerchant == '2') ? this.payType : '',
							sign: (this.payType == '2' && this.zfbMerchant == '2') ? this.zfbMerchant : ''
						},
					}, 'zfbInfo']
				} else {
					return [{
						zfbSpInfo: {
							...this.zfbServiceForm,
							id: this.zfbSpPayId ? this.zfbSpPayId : '',
							merchantId: this.merchantId,
							type: (this.payType == '2' && this.zfbMerchant == '1') ? this.payType : '',
							sign: (this.payType == '2' && this.zfbMerchant == '1') ? this.zfbMerchant : ''
						},
					}, 'zfbSpInfo']
				}
			},
		}
	}
</script>

<style lang="less">
	.text-area {
		.card {
			.payConfigurationWeChat {
				padding: 30rpx;
			}
		}

		.sumbit-btn {
			width: 670rpx;
			

			bottom: 50rpx;

			height: 100rpx;
			color: #fff;
			border-radius: 10px;
			background-color: #1890FF;
		}

	}
</style>